<template>
	<view class="container">
		<view class="login_box" v-if="!token">
			<view class="login_title">您还未登录</view>
			<view class="login_content">
				请先登录之后再进行操作!
			</view>
			<view class="login_but_group">
				<button type="default" size="default" @click="back(false)">暂不登录</button>
				<button type="warn" size="default" @click="getUserInfoProfile">立即登录</button>
			</view>
		</view>
		<view class="authorization" v-if="isImpower">
			<UserMandate @closePage="back" :isLogin="true"></UserMandate>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'
	import {
		getUser,
		getUserInfo
	} from '@/api/user'
	import cookie from '@/utils/store/cookie'
	import {
		login,
	} from '@/utils'
	import {
		VUE_APP_API_URL
	} from '@/config'
	import UserMandate from '@/pages/user/UserMandate/index.vue'

	export default {
		data() {
			return {
				// 是否显示授权页面
				isImpower: false
			}
		},
		components: {
			UserMandate
		},
		computed: {
			...mapState(['isAuthorization', '$deviceType', 'token']),
			...mapGetters(["userInfo", 'token']),
		},
		onLoad() {

		},
		onHide() {

		},
		onUnload() {

		},
		methods: {
			...mapActions(['changeAuthorization', 'setUserInfo']),
			...mapMutations(['updateAuthorizationPage']),
			// 暂不登录
			back(refresh=false) {
				this.$parent.closeLogin(refresh)
			},
			// 登录
			getUserInfoProfile(data) {
				wx.getUserProfile({
					lang: 'zh_CN',
					desc: '需要获取您的信息用来展示',
					success: res => {
						uni.showLoading({
							title: '登录中',
						})
						login(res)
							.then(e => {
								this.showAuthorization()
								if (this.isImpower) {
									console.log('登陆成功', this.userInfo)
									return
								} else {
									this.$yrouter.reLaunch({
										path: cookie.get('redirect').replace(/\ /g, ''),
									})
									this.$store.dispatch('getUser')
									this.back(true)
								}
								uni.hideLoading()
							})
							.catch(error => {
								uni.hideLoading()
								uni.showToast({
									title: error,
									icon: 'none',
									duration: 2000,
								})
							})
					},
				})
			},
			// 展示授权页面
			showAuthorization() {
				this.isImpower = false
				if (this.token) {
					if (this.userInfo.phone == '' || this.userInfo.phone == null || !this
						.userInfo.nickname || this.userInfo.nickname == '微信用户') {
						this.isImpower = true
					}
				}
				return this.isImpower
			}
		},
		mounted() {
			this.showAuthorization()
		},
	}
</script>

<style lang="less">
	.container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.login_box {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: white;
		border-radius: 15rpx;
		width: 85%;
		padding: 30rpx 10rpx 20rpx 10rpx;

		.login_title {
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #383838;
			margin-top: 10rpx;
		}

		.login_content {
			text-align: center;
			color: #676767;
			margin: 20rpx 0;
			padding: 10rpx;
		}

		.login_but_group {
			display: flex;
			align-items: center;
			justify-content: space-around;
			// padding: 10rpx 0;
			margin: 30rpx 0;

			button {
				margin-left: 0;
				margin-right: 0;
			}
		}
	}

	.authorization {
		height: 100%;
		width: 100%;
	}
</style>